import React from "react";
import { NavBar } from "antd-mobile";
import { withRouter } from "react-router-dom";
import PropTypes from "prop-types";
// import "./index.css";
// 导入 css in js 样式文件
import styles from './index.module.css'

// console.log(styles);
function NavHeader({ children, history, onLeftClick,className , rightContent }) {
  // console.log(this.props.history);
  // 默认点击事件————返回上一页
  const defaultRouter = () => history.go(-1);

  return (
    <NavBar
      // className="navbar"
      className={ [styles.navbar,className || ''].join(' ') }
      // 模式 默认值是 dark
      mode="light"
      // 左侧小图片
      icon={<i className="iconfont icon-back"></i>}
      // 左侧按钮的点击事件
      // onLeftClick={() => this.props.history.go(-1)}
      onLeftClick={onLeftClick || defaultRouter}
      rightContent={rightContent}
    >
      {children}
    </NavBar>
  );
}

// 组件的props校验
NavHeader.propTypes = {
  children: PropTypes.string.isRequired,
  onLeftClick: PropTypes.func,
  className: PropTypes.string,
  rightContent: PropTypes.array
};

export default withRouter(NavHeader);
